<template>
  <a-card :bordered="false" :loading="loading">
    <div class="w-full">
      <a-form :model="detailData" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="景点名称" name="name">
              <a-input v-model:value="detailData.name" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="封面" name="cover">
              <upload-image
                :image-str="detailData.cover"
                :component-props="{ maxCount: 1, disabled: true }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24" :pull="2">
            <a-form-item label="地点">
              <div class="flex justify-between">
                <a-input v-model:value="detailData.address" class="m-r-4" disabled />
                <a-input v-model:value="detailData.detailedAddress" disabled />
              </div>
            </a-form-item>
          </a-col>
          <a-col :span="24" :pull="2">
            <a-form-item label="轮播图片" name="images">
              <upload-image
                :image-str="detailData.images"
                :component-props="{ maxCount: 5, disabled: true }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="景点特色" name="feature">
              <a-textarea v-model:value="detailData.feature" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="价格" name="price">
              <a-input v-model:value="detailData.price" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!--            <div class="inline-flex items-center whitespace-nowrap">-->
            <a-form-item label="景点类型" name="type">
              <a-select
                v-model:value="detailData.type"
                class="min-w-150px"
                allow-clear
                :options="typeList"
                placeholder="请选择景点类型"
                disabled
              ></a-select>
            </a-form-item>
            <!--            </div>-->
          </a-col>
          <a-col :span="12">
            <a-form-item label="景点等级" name="type">
              <a-select
                v-model:value="detailData.grade"
                class="min-w-150px"
                allow-clear
                :options="gradeList"
                placeholder="请选择景点等级"
                disabled
              ></a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="排序" name="sort">
              <a-input v-model:value="detailData.sort" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="发布时间" name="publishTime">
              <a-date-picker
                :value="formatToDateTime(detailData.publishTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="24" :pull="1">
            <a-form-item
              label="介绍"
              name="introduce"
              :label-col="{ span: 3 }"
              :wrapper-col="{ span: 21 }"
            >
              <tinymce-editor
                v-model:value="detailData.introduce"
                placeholder="详细介绍"
                disabled
              ></tinymce-editor>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="创建时间" name="createTime">
              <a-date-picker
                :value="formatToDateTime(detailData.createTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="更新时间" name="updateTime">
              <a-date-picker
                :value="formatToDateTime(detailData.updateTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <!--          </a-row>-->
        <a-form-item :wrapper-col="{ span: 24 }">
          <div class="text-center">
            <a-button
              v-if="$auth('attractions-update')"
              class="mr-50px"
              type="primary"
              @click="router.push(`/attractions/attractionsEdit?id=${detailData.id}`)"
              >编辑</a-button
            >
            <a-button @click="closeTab">返回</a-button>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </a-card>
</template>

<script setup lang="tsx">
  import { message } from 'ant-design-vue';
  import DynamicForm from '@/components/dynamicForm/index.vue';
  import useRequestDetail from '@/hooks/useRequestDetail';
  import { attractionsApi, createAttractions, updateAttractions } from '@/api/attractions';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  import { ComponentsTypeEnum } from '@/enums/componentsEnum';
  import { categoryJsonByType } from '@/api/category';
  import { categoryTypeEnum } from '@/enums/categoryTypeEnum';
  import { formatToDateTime } from '@/utils/dateUtil';

  defineOptions({
    name: 'attractionsDetail',
  });

  const format = 'YYYY-MM-DD HH:mm';
  const typeList = ref<{ id: number; name: string }[]>([]);
  const gradeList = ref<{ value: number; label: string }[]>([]);

  const router = useRouter();
  const route = useRoute();
  const tabsViewStore = useTabsViewStore();
  // const dataColumn = ref([
  //   {
  //     field: 'rusticId',
  //     component: ComponentsTypeEnum.Input,
  //     label: '关联乡村id',
  //     colProps: {
  //       span: 12,
  //     },
  //     rules: [],
  //   },
  //   {
  //     field: 'name',
  //     component: ComponentsTypeEnum.Input,
  //     label: '景点名称',
  //     colProps: {
  //       span: 12,
  //     },
  //     rules: [],
  //   },
  //   {
  //     field: 'address',
  //     component: ComponentsTypeEnum.Input,
  //     label: '地区',
  //     colProps: {
  //       span: 12,
  //     },
  //     rules: [],
  //   },
  //   {
  //     field: 'detailedAddress',
  //     component: ComponentsTypeEnum.Input,
  //     label: '详细地址',
  //     colProps: {
  //       span: 12,
  //     },
  //     rules: [],
  //   },
  //   {
  //     field: 'introduce',
  //     component: ComponentsTypeEnum.Input,
  //     label: '介绍',
  //     colProps: {
  //       span: 12,
  //     },
  //     rules: [],
  //   },
  //   {
  //     field: 'cover',
  //     component: ComponentsTypeEnum.Input,
  //     label: '封面',
  //     colProps: {
  //       span: 12,
  //     },
  //     rules: [],
  //   },
  //   {
  //     field: 'images',
  //     component: ComponentsTypeEnum.Input,
  //     label: '图片(轮播图)',
  //     colProps: {
  //       span: 12,
  //     },
  //     rules: [],
  //   },
  //   {
  //     field: 'grade',
  //     component: ComponentsTypeEnum.Input,
  //     label: '景点等级id',
  //     colProps: {
  //       span: 12,
  //     },
  //     rules: [],
  //   },
  //   {
  //     field: 'type',
  //     component: ComponentsTypeEnum.Input,
  //     label: '景点类型id',
  //     colProps: {
  //       span: 12,
  //     },
  //     rules: [],
  //   },
  //   {
  //     field: 'sort',
  //     component: ComponentsTypeEnum.Input,
  //     label: '排序',
  //     colProps: {
  //       span: 12,
  //     },
  //     rules: [],
  //   },
  //   {
  //     field: 'feature',
  //     component: ComponentsTypeEnum.Input,
  //     label: '景点特色',
  //     colProps: {
  //       span: 12,
  //     },
  //     rules: [],
  //   },
  //   {
  //     field: 'price',
  //     component: ComponentsTypeEnum.Input,
  //     label: '价格',
  //     colProps: {
  //       span: 12,
  //     },
  //     rules: [],
  //   },
  //   {
  //     field: 'status',
  //     component: ComponentsTypeEnum.Input,
  //     label: '状态(1发布 2下架)',
  //     colProps: {
  //       span: 12,
  //     },
  //     rules: [],
  //   },
  //   {
  //     field: 'creatorId',
  //     component: ComponentsTypeEnum.Input,
  //     label: '创建人id',
  //     colProps: {
  //       span: 12,
  //     },
  //     rules: [],
  //   },
  //   {
  //     field: 'modifierId',
  //     component: ComponentsTypeEnum.Input,
  //     label: '修改人id',
  //     colProps: {
  //       span: 12,
  //     },
  //     rules: [],
  //   },
  //   {
  //     field: 'publishTime',
  //     component: ComponentsTypeEnum.Input,
  //     label: '发布时间',
  //     colProps: {
  //       span: 12,
  //     },
  //     rules: [],
  //   },
  //   {
  //     field: 'updateTime',
  //     component: ComponentsTypeEnum.Input,
  //     label: '更新时间',
  //     colProps: {
  //       span: 12,
  //     },
  //     rules: [],
  //   },
  // ]);
  const { detailData, loading } = useRequestDetail({
    apiKey: attractionsApi.attractionsDetail,
    initParams: route?.query,
    isMount: !!Object.values(route?.query).length && !!Object.values(route?.query)[0],
  });
  const submitForm = async (params) => {
    const attractionsId = route?.query?.id;
    const res = attractionsId
      ? await updateAttractions({
          ...params,
          id: attractionsId,
        })
      : await createAttractions(params);
    if (res) {
      message.success(res?.msg);
      closeTab();
    }
  };

  const closeTab = () => {
    tabsViewStore.closeCurrentTab(route);
  };

  const getCategoryList = async () => {
    const res = await categoryJsonByType({ type: categoryTypeEnum.ATTRACTION_TYPE });
    if (res) {
      typeList.value = res.data.map((item: { name: string; id: number }) => ({
        label: item.name,
        value: item.id,
      }));
    }
    const gradeRes = await categoryJsonByType({ type: categoryTypeEnum.ATTRACTION_GRADE });
    if (gradeRes) {
      gradeList.value = gradeRes.data.map((item: { name: string; id: number }) => ({
        label: item.name,
        value: item.id,
      }));
      // 添加额外的元素到数组开头
      gradeList.value.unshift({ label: '无', value: 0 });
    }
  };

  onMounted(() => {
    getCategoryList();
  });
</script>

<style></style>
